<template>
    <div class="inbox-mail">
        <baseHeader :clickName.sync="indexName"></baseHeader>

        <section class="inbox-content" v-loading="loading.status" :element-loading-text="loading.txt">
            <div class="main-menu">
                <div class="menu-handle" v-if="menuHandle == 'all'">
                    <el-tooltip class="item" effect="light" content="搜索" placement="bottom-start">
                        <img @click="menuHandle = 'search'" src="./../../../assets/email/images/search.png" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" content="刷新" placement="bottom-start">
                        <img @click="refreshMail" src="./../../../assets/email/images/refresh.png" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" content="选择" placement="bottom-start">
                        <img @click="chooseList" v-if="!isChoose" src="./../../../assets/email/images/choose.png" />
                        <img @click="cancelChoose" v-else src="./../../../assets/email/images/choose-active.png" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" content="全选" placement="bottom-start">
                        <img @click="checkAll" v-if="!isAll" src="./../../../assets/email/images/check.png" />
                        <img @click="cancelChoose" v-else src="./../../../assets/email/images/check-active.png" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" content="删除" placement="bottom-start">
                        <img v-if="!isChoose || !isAll" style="cursor: not-allowed;" src="./../../../assets/email/images/delete.png" />
                        <img v-if="isChoose || isAll" @click="deleteMail" src="./../../../assets/email/images/delete-active.png" />
                    </el-tooltip>
                    <el-tooltip class="item" id="sort_img" effect="light" content="排序" placement="bottom-start">
                        <img v-if="!isSort"  @click="sortList" src="./../../../assets/email/images/sort.png" />
                        <img v-else @click="cancelSort" src="./../../../assets/email/images/sort-active.png" />
                    </el-tooltip>
                </div>

                <div class="menu-handle menu-handle-search" v-if="menuHandle == 'search'">
                    <el-input
                        placeholder="邮件标题、邮件正文、发件人"
                        @input="getSerach"
                        v-model="menuSearch">
                        <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <span @click="cancelSearch">取消</span>
                </div>
                <div class="sort-filter" id="sort_box" v-if="isSort">
                    <div class="box-sort">
                        <div 
                            v-for="(item, index) in filterList" 
                            :key="index" 
                            :class="listParam.key1 == index ? 'text text-active' : 'text'" 
                            @click="handleFilter(index)">
                            {{item}}
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="box-sort">
                        <div  :class="listParam.key2 === 'desc' ? 'text text-active' : 'text'" @click="handleSort('desc')">降序</div>
                        <div  :class="listParam.key2 === 'asc' ? 'text text-active' : 'text'" @click="handleSort('asc')">升序</div>
                    </div>
                </div>

                <template v-if="searchMeunContent">
                    <div class="no-search-menu-content">无搜索匹配内容</div>
                </template>
                <template v-else>
                    <div v-if="listData.length > 0" class="menu-conten">
                        <el-scrollbar>
                            <el-checkbox-group v-model="selectedMail" @change="handleMailChange">
                                <template v-for="(item, index) in listData">
                                    <div 
                                        :key="index"
                                        :class="mailIndex == index ? 'menu-list menu-list-active': 'menu-list'"  
                                        @click="checkMail(item, index)">
                                        <span class="menu-left" v-if="isChoose || isAll">
                                            <el-checkbox :label="item.id"></el-checkbox>
                                        </span>
                                        <div class="menu-right">
                                            <div>
                                                <img v-if="getIsRead(item.user)" src="./../../../assets/email/images/have-read.png" />
                                                <img v-else src="./../../../assets/email/images/unread.png" />
                                                <div>
                                                    <span>{{item.user_name}}</span>
                                                    <span>{{item.subject}}</span>
                                                </div>
                                            </div>
                                            <div class="time">
                                                <span>{{item.create_time}}</span>
                                                <img v-if="item.file.length > 0" src="./../../../assets/email/images/attachment.png" />
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-checkbox-group>
                        </el-scrollbar>
                        
                        <div class="page-turning">
                            <span v-if="listParam.page_index != 1" @click="prePage"><i class="el-icon-arrow-left"></i></span>
                            <span v-else style="cursor: not-allowed;color: gainsboro;"><i class="el-icon-arrow-left"></i></span>
                            <span v-if="notNext" @click="nextPage"><i class="el-icon-arrow-right"></i></span>
                             <span v-else style="cursor: not-allowed;color: gainsboro;"><i class="el-icon-arrow-right"></i></span>
                        </div>
                    </div>
                    <div v-else class="no-menu-content">
                        <img src="./../../../assets/email/images/no-data.png" />
                        <p>暂无数据</p>
                    </div>
                </template>
            </div>

            <div class="main-conten" v-if="mailContent">
                <div class="mail-banner">
                    <span @click="revertMail"><img src="./../../../assets/email/images/revert.png" />回复</span>
                    <span @click="forwardMail"><img src="./../../../assets/email/images/forward.png" />转发</span>
                </div>

                <div class="user-info">
                    <div>
                        <img :src="getAvatar(itemDetail.avatar_path)" />
                        <div>
                            <span>{{itemDetail.user_name}}</span>
                             <div>
                                <template v-if="Object.keys(itemDetail).length != 0">
                                    <span v-if="itemDetail.role_name.length > 0">{{itemDetail.role_name[0]}}</span>
                                    <span v-if="itemDetail.org_name.length > 0">{{itemDetail.org_name[0]}}</span>
                                </template>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div>
                            <span>主题：</span><span>{{itemDetail.subject}}</span>
                        </div>
                        <div>
                            <span>发件人：</span><span>{{itemDetail.user_name}}</span>
                        </div>
                        <div>
                            <span>收件人：</span><span>{{getUserName(itemDetail.user, 1)}}</span>
                        </div>
                        <div>
                            <span>抄送人：</span><span>{{getUserName(itemDetail.user, 2)}}</span>
                        </div>
                        <div>
                            <span>时间：</span><span>{{itemDetail.create_time}}</span>
                        </div>
                        <div class="attachment">
                            <span>附件：</span>
                            <div>
                                <template v-if="itemDetail.file.length > 0">
                                    <span v-for="(item, index) in itemDetail.file" :key="index">
                                        <img alt="附件" src="./../../../assets/email/images/attachment.png" />
                                        <span class="name" @click="previewFile(item)">{{item.name + '.' + item.postfix}}</span>
                                        <a :data-link="`${BASE_URL}/api/email/file?company=BL&device_name=TE-0600R&sign=b0BrQILFn4dP8u00r54qTIlpLXBdNMWi&actioncode=get_file&data[id]=${itemDetail.id}&data[fid]=${item.id}&data[token]=${item.token}`" @click="downSource">下载</a>
                                        <!-- <a target="_blank" :href="`${BASE_URL}/api/email/file?company=BL&device_name=TE-0600R&sign=b0BrQILFn4dP8u00r54qTIlpLXBdNMWi&actioncode=get_file&data[id]=${itemDetail.id}&data[fid]=${item.id}&data[token]=${item.token}`">下载</a> -->
                                    </span>
                                </template>
                                <span v-else style="color: #020202;font-size: 12px;">无</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mail-content" v-html="itemDetail.content"></div>
            </div>

            <div v-else class="no-mail-data">
                <p class="text">从左侧选择邮件以查看</p>
            </div>
        </section>

        <transition name="el-fade-in-linear">
			<div class="video-preview" :class="{activeLive: isActive}">
				<div class="maskingBox"
					v-loading="viewLoading.status"
					:element-loading-text="viewLoading.txt">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="closeVideoView"></i>
					</div>
					<div class="masking_c">
						<nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam"></nativeVideo>
					</div>
				</div>
			</div>
		</transition>

        <transition name="el-fade-in-linear" lock-scroll="false">
			<div class="document-preview" :class="{activeLive: isPDFActive}">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="closePdfView"></i>
					</div>

					<div class="masking_c">
                    <div>
                        <div class="pdf-view">
                            <div 
                                v-if="viwPdfParam.loadedRatio > 0 && viwPdfParam.loadedRatio < 1" 
                                style="background-color: green; color: white; text-align: center" 
                                :style="{ width: viwPdfParam.loadedRatio * 100 + '%' }">
                                {{ Math.floor(viwPdfParam.loadedRatio * 100) }}%
                            </div>
                            <pdf ref="pdf" 
                                :src="viwPdfParam.src" 
                                :page="viwPdfParam.page"   
                                @progress="viwPdfParam.loadedRatio = $event" 
                                @error="pdfError" 
                                @num-pages="viwPdfParam.numPages = $event" 
                                @link-clicked="viwPdfParam.page = $event">
                            </pdf>
                        </div>

                        <el-pagination
                            @current-change="pdfPageChange"
                            :current-page="viwPdfParam.page"
                            :page-size="1"
                            layout="total,  prev, pager, next, jumper"
                            :total="viwPdfParam.numPages">
                        </el-pagination>
                    </div>
				</div>
				</div>
			</div>
		</transition>

        <el-dialog
            title="图片预览"
            class="picture-preview"
            :visible.sync="imgVisible"
            :close-on-click-modal="false">
            <div>
                <img :src="imgViewUrl">
            </div>
        </el-dialog>

        <el-dialog
			title="音频预览"
            class="audio-preview"
			:visible.sync="voiceVisible"
            :before-close="closeAudio"
			:close-on-click-modal="false">
			<div>
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload">
				    Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
    </div>
</template>

<script>
    import pdf from 'vue-pdf';
    import baseHeader from './basse-header';
    import nativeVideo from './../../common/nativeVideo';
    import defaultImg from './../../../assets/images/email/user.png';
    
    export default {
        data() {
            return {
                indexName: 'inbox',
                isSort: false, // 排序
                isAll: false, // 全选
                isChoose: false, // 选择
                mailContent: false, // 是否有邮件内容
                searchMeunContent: false, // 搜索结果为空
                isActive: true,
                isPDFActive: true,
                imgVisible: false,
                voiceVisible: false,
                showVideoPlayer: false,
                notNext: false, // 下一页不可点击
                isId: false, // 是否带上id查询
                timerSearch: null, // 查询定时器
                sessionId: null, // 打开邮件的id
                totalNum: 0, // 邮件总页数
                voiceViewUrl: '',
                imgViewUrl: '',
                mailIndex: null, // 打开邮件列表的下标
                menuHandle: 'all', // 搜索  all | search
                menuSearch: '', // 搜索关键字
                listData: [], // 邮件列表 
                selectedMail: [], // 选中邮件
                filterList: ['日期', '发件人', '是否已读', '附件'],
                loading:{
					status:false,
					txt:'获取数据...',
				},
                listParam: {
                    key1: 0,  // file：文件,create_time:日期，create_id：发件人，is_read:是否已读
                    key2: 'desc', // desc:降序（默认），asc:升序
                    page_index: 1,
                    page_size: 12
                },
                itemDetail: {}, // 邮件详情信息
                playParam: {play_url: ''},
                viewLoading:{
                    status: false,
                    txt: '加载数据...'
                },
                viwPdfParam: {
                    src: '',
                    loadedRatio: 0,
                    page: 1,
                    numPages: 0,
                    rotate: 0
                },
            }
        },
        created() {
            let mailListId = JSON.parse(sessionStorage.getItem('mailListId'));
            let hashId = this.$route.hash.split('#id=')[1];

            if ((mailListId && mailListId.inbox) || hashId) {
                this.isId = true;

                if (hashId) {
                    if (mailListId) {
                        sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{inbox: +hashId}}));
                    } else {
                        sessionStorage.setItem('mailListId', JSON.stringify({inbox: +hashId}));
                    }

                    this.sessionId = +hashId;
                    this.getList('inbox', +hashId);
                } else {
                    this.sessionId = mailListId.inbox;
                    this.getList('inbox', mailListId.inbox);
                }
            } else {
                this.getList();
            }
        },
        mounted() {
            // 点击 sort_box 区域以外隐藏
            let that = this;
            document.addEventListener('click', function(e) {
                var e = e || window.event; //浏览器兼容性 
                var elem = e.target || e.srcElement;

                while (elem) { // 循环判断至跟节点，防止点击的是div的id=sort_box 
                    if (elem.id && (elem.id == 'sort_box' || elem.id == 'sort_img')) { 
                        return; 
                    } 

                    elem = elem.parentNode; 
                }
    
                that.isSort = false;
                document.querySelector('#sort_box') && (document.querySelector('#sort_box').style.display = 'none'); // 点击的不是div或其子元素
            })
        },
        components: {
            pdf,
            baseHeader,
            nativeVideo
        },
        methods: {
            /**
             * 本页下载
             */
            downSource(ev) {
                window.location.href = ev.currentTarget.dataset.link;
            },
            /**
             * 获取上一页数据
             */
            prePage() {
                let json = JSON.parse(sessionStorage.getItem('mailListId'));

                this.isId = false;
                this.mailIndex = null;
                this.listParam.page_index--;
                this.cancelChoose();

                if (json && json.inbox) {
                    this.getList('inbox', json.inbox);
                } else {
                    this.getList();
                }
            },
            /**
             * 获取下一页数据
             */
            nextPage() {
                let json = JSON.parse(sessionStorage.getItem('mailListId'));
                
                this.isId = false;
                this.mailIndex = null;
                this.listParam.page_index++;
                this.cancelChoose();

                if (json && json.inbox) {
                    this.getList('inbox', json.inbox);
                } else {
                    this.getList();
                }
            },
            /**
             * 获取收件箱列表
             * @param {String} name 操作标识
             * @param {Number} id 邮件 id
             */
            getList(name, id) {
                let success = (res => {
                    if (is_empty(res.data) && this.sessionId && this.isId) {
                        this.sessionId = null;
                        let mailListId = JSON.parse(sessionStorage.getItem('mailListId'));
                        sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{inbox: ''}}));
                        this.getList('search', '');
                    }

                    if (!is_empty(res.data)) {
                        this.listData = deep_clone(res.data.data);
                    }

                    this.selectedMail = [];
                    this.isChoose = false;
                    this.isAll = false;
                    this.loading.status = false;
                    this.searchMeunContent = false;
                    this.totalNum = res.data.data_sum;
                    this.listParam.page_size = res.data.page_size;
                    this.listParam.page_index = res.data.page_index;

                    if (Math.ceil(res.data.data_sum / res.data.page_size) == res.data.page_index) {
                        this.notNext = false;
                    } else {
                        this.notNext = true;
                    }

                    if (name === 'inbox' && this.listData.length > 0) {
                        this.getMailDetail({id: id}, 'inbox');
                    }

                    name === 'refresh' && (this.$message.success('刷新成功'));

                    if (name === 'search' && is_empty(this.listData)) {
                        this.searchMeunContent = true;
                    }

                    if (name === 'inbox') {        
                        this.listData.forEach((item, index) => {
                            if (item.id === id) {
                                this.mailIndex = index;
                            }
                        })
                    }
                });

                this.loading.status = true;

                let orderField = 'create_time';
                switch(parseInt(this.listParam.key1)) {
                    case 1: 
                        orderField = 'create_id';
                        break;
                    case 2: 
                        orderField = 'is_read';
                        break;
                    case 3: 
                        orderField = 'file';
                        break;
                    default: 
                         orderField = 'create_time';
                }

                let params = {
                    flag: 1,
                    id: (this.sessionId && this.isId) ? this.sessionId : null,
                    start_time: null,
                    end_time: null,
                    subject: this.menuSearch,
                    content: this.menuSearch,
                    user_name: this.menuSearch,
                    file: null,
                    status: null,
                    order_field: orderField,
                    order: this.listParam.key2,
                    page_size: this.listParam.page_size,
                    page_index: (this.sessionId && this.isId) ? 0 : this.listParam.page_index,
                }

                this.$ajax({
                    url: "api/email/lists",
                    method: "get",
                    params: params,
                    func: {success: success}
                });
            },
            /**
             * 获取邮件详细信息
             * @param {Object} obj 邮件信息
             * @param {String} name 操作标识
             */
            getMailDetail(obj, name, inx) {
                let success = (res => {
                    if (is_empty(res.data)) {
                        return false;
                    }

                    this.itemDetail = res.data;
                    this.mailContent = true;
                    this.sessionId = obj.id;

                    let mailListId = JSON.parse(sessionStorage.getItem('mailListId'));

                    if (mailListId) {
                        sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{inbox: obj.id}}));
                    } else {
                        sessionStorage.setItem('mailListId', JSON.stringify({inbox: obj.id}));
                    }

                    if (this.$route.hash.split('#id=')[1]) {
                        window.location.hash = `#id=${obj.id}`;
                    }

                    if (name !== 'inbox') {
                        this.mailIndex = inx;
                        this.changeStates(obj);
                    }
                    let self = this;

                    this.$nextTick(() => {
                        let source = document.querySelectorAll('.download-source');
                        let previewS = document.querySelectorAll('.click-span-preview');
                        
                        source.forEach(item => {
                            item.addEventListener('click', function(ev) {
                                window.location.href = ev.currentTarget.dataset.link;
                            }, false)
                        })
                        previewS.forEach(item => {
                            item.addEventListener('click', function(ev) {
                                self.previewFile({id: +ev.currentTarget.dataset.id, file_type: +ev.currentTarget.dataset.type});
                            }, false)
                        })
                    })
                });
                let fail = (res => {
                    this.$message.error(res.msg)
                    this.getList();
                })

                this.$ajax({
                    url: "api/email/single",
                    method: "get",
                    params: {id: obj.id},
                    func: {success: success, fail: fail}
                });
            },
            /**
             * 获取用户头像
             * @param {Object} obj 用户信息
             */
            getAvatar(obj) {
                if (obj) {
                    return this.BASE_URL + obj;
                } else {
                    return defaultImg;
                }
            },
            /**
             * 获取收件人名称
             * @param {Object} obj 收件人列表
             * @param {Number} type 1-发件人 | 2-抄送人 | 3-外部收件人
             */
            getUserName(obj, type) {
                if (is_empty(obj)) {
                    return '';
                } else {
                    let text = '';

                    obj.filter(item => item.receive_type == type).forEach((item, index) => {
                        text += (index != 0 ? '，' : '') + item.name;
                    })

                    if (text === '') {
                        text = '无';
                    }

                    return text;
                }
            },
            /**
             * 邮件是否已读
             * @param {Array} arr 用户列表
             */
            getIsRead(arr) {
                let flag = true;
                if (!is_empty(arr)) {
                    arr.forEach(item => {
                        if (item.receiver == this.$g.user_id && item.is_read === 0) {
                            flag = false;
                        }
                    })
                }

                return flag;
            },
            /**
             * 根据关键字获取邮件列表
             */
            getSerach() {
                clearTimeout(this.timerSearch);
                this.timerSearch = null;

                this.timerSearch = setTimeout(() => {
                    this.isId = false;
                    this.listParam.page_index = 1;
                    this.getList('search');
                }, 500);
            },
            /**
             * 取消搜索
             */
            cancelSearch() {
                this.isId = true;
                this.menuHandle = 'all';
                this.menuSearch = '';
                
                this.getList();
            },
            /**
             * 刷新数据
             */
            refreshMail() {
                this.listParam = {
                    key1: 0,
                    key2: 'desc',
                    page_index: 1,
                    page_size: 12
                }

                this.isId = false;
                this.mailIndex = null;
                this.isSort = false;
                this.isAll = false;
                this.isChoose = false;
                this.menuSearch = '';
                this.selectedMail = [];

                this.getList('refresh');
            },
            /**
             * 选择邮件
             */
            chooseList() {
                this.isAll = false;
                this.isChoose = true;
            },
            /**
             * 取消单选和全选
             */
            cancelChoose() {
                this.isChoose = false;
                this.isAll = false;
                this.selectedMail = [];
            },
            /**
             * 全选
             */
            checkAll() {
                this.isAll = true;
                this.isChoose = false;
                this.selectedMail = [];

                this.listData.forEach(item => {
                    this.selectedMail.push(item.id);
                })
            },
            /**
             * 删除邮件
             */
            deleteMail() {
                const success = (res => {
                    let mailListId = JSON.parse(sessionStorage.getItem('mailListId'));

                    if (this.listData.length === this.selectedMail.length && this.listParam.page_index > 1) {
                        this.listParam.page_index--;
                    }
                    this.mailIndex = null;
                    if (mailListId && mailListId.inbox) {
                        if (this.selectedMail.indexOf(mailListId.inbox) > -1) {
                            this.itemDetail = {};
                            this.mailContent = false;
                            this.isId = false;
                            this.sessionId = null;
                            
                            sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{inbox: ''}}));
                        } 
                    }

                    this.selectedMail = [];
                    this.$message.warning('已删除进入废纸篓中');
                    this.getList();
                })

                this.$ajax({
                    url: "api/email/garbagesingle",
                    method: "post",
                    data: {id: [...new Set(this.selectedMail)]},
                    func: {success: success}
                });
            },
            /**
             * 邮件排序
             */
            sortList() {
                this.isSort = true;
                this.isChoose = false;
                this.isAll = false;
                this.selectedMail = [];
            },
            /**
             * 取消排序
             */
            cancelSort() {
                this.isSort = false;
            },
            /**
             * 邮件排序条件
             * @param {Number} inx 下标
             */
            handleFilter(inx) {
                this.listParam.key1 = inx;
                this.isSort = false;

                this.getList();
            },
            /**
             * 邮件排序顺序
             * @param {String} id 标志
             */
            handleSort(id) {
                this.listParam.key2 = id;
                this.isSort = false;

                this.getList();
            },
            /**
             * 点击选择邮件
             * @param {Array} value 选中的数组
             */
            handleMailChange(value) {},
            /**
             * 查看邮件内容
             * @param {Object} obj 邮件信息
             * @param {String} index 列表标识
             */
            checkMail(obj, index) {
                if (this.isChoose || this.isAll) { // 选中状态不能切换邮件内容
                    return false;
                } else {
                    this.getMailDetail(obj, '', index);
                }
            },
            /**
             * 改变邮件状态 -- 未读改为已读
             *@param {Object} obj 邮件信息
             */
            changeStates(obj) {
                let flag = false;
                let inx = null;

                obj.user.forEach((item, index) => {
                    if (item.receiver == this.$g.user_id && item.is_read == 0) {
                        inx = index;
                        flag = true;
                    }
                })

                if (flag) {
                    let success = (res => {});

                    this.$ajax({
                        url: "api/email/user",
                        method: "put",
                        data: {id: obj.id},
                        func: {success: success}
                    });

                    this.listData[this.mailIndex].user[inx].is_read = 1;
                }
            },
            /**
             * 回复邮件 
             */
            revertMail() {
                if (this.selectedMail.length > 1) {
                    this.$message.warning('只能选择一个进行回复');
                } else {
                    this.linkTo(`reply?id=${this.itemDetail.id}`);
                }
            },
            /**
             * 转发邮件
             */
            forwardMail() {
                if (this.selectedMail.length > 1) {
                    this.$message.warning('只能选择一个进行转发');
                } else {
                    this.linkTo(`forward?id=${this.itemDetail.id}&name=inbox`);
                }
            },
            /**
             * 预览附件
             * @param {Object} obj 附件信息
             * 文件类型（1：文档；2：日志；3：图片；4：压缩文件；5：音频文件；6：视频；7：应用程序；8：其他）
             */
            previewFile(obj) {
                this.viewLoading.status = true;

                switch(parseInt(obj.file_type)) {
                    case 1:
                        this.isPDFActive = false;
                        break;
                    case 3:
                        this.imgVisible  = true;
                        break;
                    case 5:
                        this.voiceVisible = true;
                        break;
                    case 6:
                        this.isActive = false;
                        break;
                    default: 
                        this.$message.warning("不支持预览的资源类型");
                        return false;
                }

                let success = ( res => {
                    let result  = res.data;

                    switch(parseInt(obj.file_type)) {
                        case 1:
                            this.pdfView( result.path);
                            break;
                        case 3:
                            this.imgView(result.path);
                            break;
                        case 5:
                            this.voiceView(result.path);
                            break;
                        case 6:
                            this.videoView(result.path);
                            break;
                        default: 
                            this.$message.warning("不支持预览的资源类型");
                    }
                })
                let fail = (res => {
                    this.viewLoading.status = false;
                    this.$message.error(res.msg);
                })
                
                this.$ajax({
                    url: "api/resource/view_info",
                    method: "get",
                    params: {
                        id: obj.id, 
                        is_email_file: 1
                    },
                    func: {
                        success: success,
                        fail: fail
                    }
                });
            },
            /**
             * 关闭音频播放
             */
            closeAudio() {
                this.voiceVisible = false;
                document.getElementById("voicepoauy").pause();
            },
            /**
             * 音频预览
             */
            voiceView(url) {
                this.voiceViewUrl = url;
                document.getElementById("voicepoauy").load();	
            },
            /**
             * 图片预览
             */
            imgView(url) {
                this.imgViewUrl = url;
            },
            /**
             * 文档预览
             */
            pdfView(url) {
                this.viwPdfParam.src = pdf.createLoadingTask(url);
            },
            /**
             * 改变文档页数
             */
            pdfPageChange(val) {
                this.viwPdfParam.page  = val;
            },
            /**
             * 文档预览失败
             */
            pdfError: function(err) {
                this.$message.error('读取文件失败');
            },
            /**
             * 关闭文档预览
             */
            closePdfView() {
                this.isPDFActive = true;
            },
            /**
             * 关闭视频预览
             */
            closeVideoView() {
                this.showVideoPlayer = false;
                this.isActive = true;
            },
            /**
             * 视频预览
             */
            videoView(url) {
                this.showVideoPlayer = true;
                this.playParam.play_url = url;
            },
            /**
             * 路由跳转
             * @param {String} name 具体页面
             */
            linkTo(name) {
                this.$router.push(`/email/${name}`);
            }
        }
    }
</script>

<style lang="scss">
    .inbox-mail {
        height: 100%;

        .inbox-content {
            display: flex;
            height: calc(100% - 68px);
            background: #fff;

            .main-menu {
                position: relative;
                width: 360px;
                height: 100%;
                border-right: 1px solid #EBEBEB;

                .menu-handle {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    padding: 20px 60px 20px 30px;
                    height: 60px;
                    border-bottom: 1px solid #EBEBEB;
                    box-sizing: border-box;

                    img {
                        cursor: pointer;
                    }
                }

                .menu-handle-search {
                    .el-input--suffix {
                        width: 220px;

                        input {
                            height: 32px;
                        }

                        i {
                            line-height: 32px;
                        }
                    }

                    >span {
                        font-size: 14px;
                        color: #586F8B;
                        cursor: pointer;
                    }
                }

                .sort-filter {
                    position: absolute;
                    top: 60px;
                    right: 0;
                    width: 140px;
                    background: #fff;
                    box-shadow: 0 2px 14px 0 rgba(184,184,184,0.50);
                    z-index: 9999;

                    .line {
                        margin: 0 10%;
                        height: 1px;
                        background:#EBEBEB;
                    }

                    .box-sort {
                        padding: 10px 0;

                        .text {
                            font-size: 12px;
                            text-align: center;
                            height: 30px;
                            line-height: 30px;
                            color: #000000;
                            cursor: pointer;
                        }

                        .text-active {
                            background: #EAF7FF;
                        }
                    }
                }

                .no-search-menu-content {
                    margin-top: 20px;
                    font-size: 14px;
                    text-align: center;
                    color: #A5A5A5;
                }

                .no-menu-content {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    height: calc(100% - 60px);

                    p {
                        margin-top: 30px;
                        font-size: 16px;
                        color: #999999;
                    }
                }

                .menu-conten {
                    height: calc(100% - 60px);
                    overflow-y: auto;

                    .page-turning {
                        position: absolute;
                        bottom: 2px;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        height: 30px;
                        font-size: 16px;
                        background: #f5f7fa;
                        border-top: 1px solid #EBEBEB;

                        >span {
                            margin-right: 20px;
                            cursor: pointer;
                        }
                    }

                    .el-scrollbar {
                        margin-bottom: 27px;
                    }

                    .menu-list-active {
                        background: #EAF7FF;
                    }

                    .menu-list {
                        display: flex;
                        align-items: center;
                        padding: 10px 20px 10px 30px;
                        border-bottom: 1px solid #EBEBEB;
                        cursor: pointer;

                        .menu-left {
                            width: 30px;

                            .el-checkbox__label {
                                display: none;
                            }
                        }

                        .menu-right {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex: 1;
                            width: 0;

                            >div:first-child {
                                display: flex;
                                align-items: center;
                                flex: 1;
                                max-width: 170px;

                                >img {
                                    margin-right: 20px;
                                }

                                div {
                                    display: flex;
                                    flex-direction: column;
                                    width: calc(100% - 30px);

                                    span {
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                                    span:first-child {
                                        padding-bottom: 5px;
                                        font-size: 14px;
                                        color: #000000;
                                    }

                                    span:last-child {
                                        font-size: 12px;
                                        color: #333333;
                                    }
                                }
                            }

                            .time {
                                display: flex;
                                justify-content: center;
                                align-items: flex-end;
                                flex-direction: column;
                                width: 135px;
                                font-size: 12px;
                                color: #999999;
                                flex-direction: inherit;
                                justify-content: space-between;

                                span {
                                    padding-bottom: 5px;
                                    word-break: break-all;
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    flex: 1;
                                    max-width: 135px;
                                }
                            }
                        }
                    }
                }
            }

            .no-mail-data {
                padding: 80px 100px;
                width: calc(100% - 360px);
                height: 100%;
                background: url('./../../../assets/email/images/no-mail.png') no-repeat 50% 50%;
                box-sizing: border-box;

                .text {
                    font-size: 18px;
                    color: #999999;
                }
            }

            .main-conten {
                position: relative;
                width: calc(100% - 360px);
                height: 100%;
                overflow: auto;
                box-sizing: border-box;

                .mail-banner {
                    position: fixed;
                    padding-left: 60px;
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    background: #fff;
                    border-bottom: 1px solid #EBEBEB;
                    box-sizing: border-box;

                    >span {
                        font-size: 14px;
                            margin-right: 50px;
                            padding: 10px 0;
                            color: #8199C7;
                            cursor: pointer;
                            
                        img {
                            margin-right: 10px;
                            vertical-align: middle;
                        }
                    }
                }
                
                .user-info {
                    margin-top: 60px;
                    padding: 20px 60px 15px;
                    line-height: 23px;
                    background: #F9F9F9;

                    >div:first-child {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-bottom: 20px;
                        border-bottom: 1px dashed #EAEAEA;

                        img {
                            margin-right: 20px;
                            width: 40px;
                            height: 40px;
                            // object-fit: contain;
                            border-radius: 50%;
                        }

                        >div {
                            flex: 1;
                        
                            >span:first-child {
                                font-size: 14px;
                                color: #333333;
                            }
                        }

                        >div>div span {
                            display: inline-block;
                            margin-right: 8px;
                            padding: 3px 15px;
                            font-size: 12px;
                            color: #888888;
                            line-height: 1.3;
                            background: #EAEAEA;
                            border-radius: 10.5px;
                        }
                    }

                    >div:last-child {
                        padding-top: 10px;
                        font-size: 12px;

                        >div {
                            display: flex;

                            >span:first-child {
                                padding-right: 10px;
                                width: 60px;
                                text-align: right;
                                box-sizing: border-box;
                            }

                            >span:last-child {
                                flex: 1;
                            }
                        }

                        .attachment {
                            display: flex;

                            >span {
                                width: 60px;
                            }

                            >div {
                                display: flex;
                                flex-wrap: wrap;
                                flex: 1;

                                >span {
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    margin-right: 30px;
                                    font-size: 14px;
                                    color: #586F8B;

                                    img {
                                        margin-right: 5px;
                                    }

                                    a {
                                        margin-left: 15px;
                                        padding: 0 18px;
                                        color: #fff;
                                        font-size: 12px;
                                        background: #8199C7;
                                        border-radius: 4px;
                                        text-decoration: none;
                                        cursor: pointer;
                                    }

                                    span {
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                    }
                }

                .mail-content {
                    padding: 40px 60px;
                    font-size: 14px;
                    color: #333333;
                    line-height: normal;
                    word-break: break-all;
                }
            }
        }

        .activeLive{
			opacity: 0;
			visibility: hidden;
		}

        .el-dialog__wrapper{
			.el-dialog__body {
                text-align: center;
				padding: 0;
            }
		}

        .masking_h {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            height: 40px;
            background: #348EFC;

            >span,
            >i {
                font-size: 16px;
                color: #fff;
            }

            >i{
                cursor: pointer;
            }
        }

        .video-preview {
            display: flex;
            justify-content: center;
            align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0, 0, 0, 0.5);
			z-index: 3;

            .maskingBox {
                width: 70vw;
                height: 70vh;
                max-width: 1000px;
                max-height: 600px;
				background: #fff;
			}

            .masking_c {
                height: calc(100% - 40px);
                box-sizing: border-box;

                >div >div {
                    height: 600px;
                }
            }
        }

        .document-preview {
			display: flex;
            justify-content: center;
            align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0, 0, 0, 0.5);
			z-index: 3;

			.maskingBox {
                width: 70vw;
                height: 70vh;
                max-width: 1200px;
                max-height: 900px;
				background: #fff;
			}

            .masking_c {
                height: calc(100% - 40px);
                box-sizing: border-box;

                >div {
                    height: 100%;

                    .pdf-view{
                        height: calc(100% - 70px);
                        overflow: hidden;
                        overflow-y: auto;

                        >span {
                            width: 100%;
                        }
                    }

                    .el-pagination {
                        padding: 20px 0;
                        text-align: center;
                        height: 70px;
                        box-sizing: border-box;
                    }
                }
            }
        }

		.picture-preview {
			display: flex;
            align-items: center;
            justify-content: center;
			margin: 0;

            .el-dialog {
                margin: 0;
                margin-top: 0 !important;
                width: 70vw;
                height: 70vh;
                max-width: 1200px;
                max-height: 900px;
                overflow: hidden;

                .el-dialog__body {
                    padding: 20px 0;
                    width: 100%;
                    height: calc(100% - 40px);
                    box-sizing: border-box;

                    div {
                        padding: 20px 40px 40px;
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                        box-sizing: border-box;

                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }

        .audio-preview {
            display: flex;
            align-items: center;
            justify-content: center;
			margin: 0;

            .el-dialog {
                margin: 0;
                margin-top: 0 !important;
                width: 500px;
                height: 300px;

                .el-dialog__body {
                    padding: 20px 0;
                    width: 100%;
                    height: calc(100% - 40px);
                    box-sizing: border-box;

                    div {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 40px;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
</style>